<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入my组件样式 -->
    <link rel="stylesheet" href="../../widget/components/my/index.css" />
    <!-- 引入recommend组件样式 -->
    <link rel="stylesheet" href="../../widget/components/recommend/index.css" />
    <link rel="stylesheet" href="../../widget/components/choose/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .header-to-my {
        position: absolute;
        top: 50%;
        right: 0.32rem;
        height: 0.5rem;
        line-height: 0.5rem;
        padding: 0 0.1rem;
        transform: translateY(-50%);
        color: rgba(222, 42, 32, 1);
        border: 1px solid rgba(222, 42, 32, 1);
        border-radius: 0.1rem;
      }

      .topic-top-title {
        height: 1rem;
        padding: 0 0.32rem;
        margin-bottom: 0.24rem;
        font-size: 0.32rem;
        background-color: #fff;
      }
      .topic-choose-result {
        width: 70%;
        line-height: 0.38rem;
      }
      .topic-choose-btn {
        color: rgba(222, 42, 32, 1);
      }
      .topic-container {
        height: 92%;
      }
      .topic-replace-icon {
        height: 0.48rem;
        width: 0.48rem;
        vertical-align: -0.12rem;
      }

      .my-container {
        padding: 0.32rem 0.32rem 0;
        background-color: #fff;
      }
      /* 推荐标题栏样式 */
      .my-recommend {
        padding: 0.16rem 0 0 0.32rem;
        font-size: 0.32rem;
        font-weight: bold;
        color: rgba(3, 3, 3, 1);
      }
      /* 推荐内容样式 */
      .my-recommend-container {
        padding-bottom: 0.32rem;
      }
      .my-recommend-item {
        margin-top: 0.32rem;
      }
      .my-recommend-img {
        margin: 0 0.32rem 0.23rem;
        height: 3.68rem;
      }
      .my-recommend-img img {
        width: 100%;
        height: 100%;
      }
      .my-recommend-title {
        width: 100%;
        padding: 0 0.32rem;
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .my-recommend-info {
        padding: 0.16rem 0.32rem 0.32rem;
        font-size: 0.24rem;
        color: rgba(102, 102, 102, 1);
      }
      .my-recommend-price {
        color: rgba(254, 80, 79, 1);
      }
      .my-recommend-price-num {
        font-size: 0.32rem;
      }
      .my-recommend-icon {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.2rem;
        vertical-align: -0.1rem;
      }
      .my-recommend-hr {
        width: 100%;
        height: 0;
        border: 1px solid rgba(232, 234, 237, 1);
      }
      .my-recommend-item:last-child .my-recommend-hr {
        border: none;
      }
      /* 右边弹出层样式 */
      .van-popup--right {
        width: 4.88rem;
        height: 100%;
      }
      /* 无课程时的样式 */
      .my-no-course-container {
        height: 5.68rem;
        text-align: center;
      }
      .my-no-course-img {
        width: 2.17rem;
        height: 2.19rem;
        margin: 0.49rem auto 0;
      }
      .my-no-course-img img {
        width: 100%;
        height: 100%;
      }
      .my-no-course-title {
        padding: 0.19rem 0 0.12rem;
        font-size: 0.3rem;
        text-align: center;
        color: rgba(51, 51, 51, 1);
      }
      .my-no-course-solve {
        padding-bottom: 0.42rem;
        font-size: 0.26rem;
        text-align: center;
        color: rgba(153, 153, 153, 1);
      }
      .my-no-course-btn {
        margin: 0 auto;
        width: 2.24rem;
        height: 0.64rem;
        line-height: 0.64rem;
        font-size: 0.24rem;
        background: rgba(222, 42, 32, 1);
      }
      .van-overlay,
      .van-popup {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">我的课程</div>
            <div class="header-right"></div>
            <div class="header-to-my" @click="goToExcellentCourse">
              选课中心
            </div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div
          class="flex-wrap flex-justify-between flex-center-wrap topic-top-title"
        >
          <div class="topic-choose-result">
            <div class="text-ess-2">
              {{ industry }}/{{ chooseAreaName }}<span
                v-if="chooseSubjectName !== '不限' || chooseAreaName !=='不限'"
                >/{{ chooseSubjectName }}</span
              >
            </div>
          </div>
          <div class="topic-choose-btn" @click="showPop">
            <span
              ><img src="./image/my/change.png" class="topic-replace-icon"
            /></span>
            更换科目
          </div>
        </div>
        <div class="my-container">
          <div v-if="hasCourse">
            <zl-my
              v-for="(item,index) of myCourseData"
              :my-course-data="item"
              :key="index"
            ></zl-my>
          </div>
          <div v-else class="my-no-course-container">
            <div class="my-no-course-img">
              <img src="./image/my/empty.png" alt="" />
            </div>
            <p class="my-no-course-title">
              您还未拥有{{ industry }}/{{ chooseAreaName}}
              <span
                v-if="chooseSubjectName !== '不限' || chooseAreaName !=='不限'"
                >/{{chooseSubjectName}}</span
              >
              课程
            </p>
            <p class="my-no-course-solve">请联系客服开通课程！</p>
            <van-button
              class="my-no-course-btn"
              round
              type="danger"
              @click="goToService"
              >联系客服</van-button
            >
          </div>
        </div>
        <div v-if="recommendData.length>0" class="my-recommend">
          推荐课程
        </div>
        <div class="my-recommend-container">
          <div
            v-for="(item,index) of recommendData"
            :key="index"
            @click="goToDetails(item.courseid)"
            class="my-recommend-item"
          >
            <div class="my-recommend-img">
              <img :src="item.coverurl" alt="" />
            </div>
            <p class="text-ess-1 my-recommend-title">{{ item.title }}</p>
            <div
              class="flex-wrap flex-justify-between flex-center-wrap my-recommend-info"
            >
              <div class="my-recommend-price">
                ￥<span class="my-recommend-price-num">{{ item.price }}</span>
              </div>
              <div>
                <img
                  class="my-recommend-icon"
                  src="./image/my/person.png"
                  alt=""
                />{{ item.views }}
              </div>
            </div>
            <div class="my-recommend-hr"></div>
          </div>
        </div>
        <!-- 右侧弹出层 -->
        <div v-if="popIsShow">
          <van-popup
            v-model="popIsShow"
            position="right"
            @click-overlay="closep"
            :close-on-click-overlay="clickClosePop"
          >
            <zl-choose
              :pop-is-show="popIsShow"
              :is-show-replay-btn="isShowReplayBtn"
              :unlimited="true"
              @change-industry="changeIndustry"
              @change-area="changeArea"
              @change-subject="changeSubject"
              @close-pop="closePop"
              @can-click-close="canClickClosePop"
            >
            </zl-choose>
          </van-popup>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <!-- 引入my 组件 -->
    <script src="../../widget/components/my/index.js"></script>
    <!-- 引入recommend 组件 -->
    <script src="../../widget/components/recommend/index.js"></script>
    <script src="../../widget/components/choose/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Button 组件
      Vue.use(vant.Button)
      // 注册 Popup 组件
      Vue.use(vant.Popup)

      new Vue({
        el: '#app',
        components: {
          'zl-my': my,
          'zl-recommend': recommend,
          'zl-choose': choose
        },
        data: {
          industryId: Number,
          industry: '专升本',
          // 用来判断子组件是否含重置按钮
          isShowReplayBtn: true,
          // 用来判断弹出层是否显示
          popIsShow: true,
          // 选中的行业 此处为固定值
          chooseIndustry: '',
          // 选中的地区名
          chooseAreaName: '',
          // 选中的科目名
          chooseSubjectName: '',
          //  我的课程数据
          myCourseData: [],
          // 推荐课程数据
          recommendData: [],
          // 在此科目下有无课程
          hasCourse: true,
          clickClosePop: false,
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          goBack() {
            window.history.back(-1)
          },
          goToDetails(courseid) {
            location.href = `../courseCenter/videoCourse.html?courseid=${courseid}`
          },
          changeIndustry(data) {
            this.industry = data
          },
          // 子组件传来的所选地区名
          changeArea(data) {
            this.chooseAreaName = data
          },
          // 子组件传来的所选科目名
          changeSubject(data) {
            this.chooseSubjectName = data
          },
          canClickClosePop(data) {
            this.clickClosePop = data
          },
          // 弹出层按钮确认事件
          closePop(data) {
            const { subjectData, areaData, industryId } = data
            this.industryId = industryId
            try {
              let subject, area
              if (areaData) {
                area = JSON.parse(areaData)
                this.addressid = area.id
              }
              if (subjectData) {
                subject = JSON.parse(subjectData)
                if (subject.id) {
                  // 是不限地区下面的科目，则id为数组  不论是数字还是数组都转为字符串
                  if (subject.ismul) {
                    this.cateid = subject.id.join()
                  } else {
                    this.cateid = String(subject.id)
                  }
                  this.chooseSubjectName = subject.title
                } else {
                  this.cateid = 0
                  this.chooseSubjectName = subject.title
                }
              }
              this.popIsShow = false
              this.getInfo()
            } catch (err) {
              this.popIsShow = true
            }
          },
          closep() {
            if (this.clickClosePop === true) {
              this.isShowZLLoading = false
            }
          },
          // 更换科目按钮
          showPop() {
            this.popIsShow = true
            this.isShowZLLoading = true
          },
          goToService() {
            location.href = `./customerService.html?${this.cateid}`
          },
          // 获取内容
          getInfo() {
            const cateObj = {
              majorid: this.industryId,
              addressid: this.addressid,
              cateid: this.cateid
            }
            // 请求信息
            userService.getMycourse(cateObj).then(res => {
              this.myCourseData = res.course
              this.recommendData = res.recommends
              this.isShowZLLoading = false
              if (res.course.length === 0) {
                this.hasCourse = false
              } else {
                this.hasCourse = true
              }
            })
          },
          goToExcellentCourse() {
            location.href = '../courseCenter/excellentCourses.html'
          }
        },
        created() {
          // 判断以前是否选了地区科目
          const {
            areaChooseName,
            subjectChooseName,
            subjectData,
            areaData,
            industryId
          } = getLStorageObj([
            'areaChooseName',
            'subjectChooseName',
            'subjectData',
            'areaData',
            'industryId'
          ])
          this.industryId = industryId
          try {
            let subject, area
            if (areaData && subjectData) {
              area = JSON.parse(areaData)
              this.addressid = area.id
              this.chooseAreaName = area.title
              if (Number(area.id) === 0) {
                this.chooseSubjectName = ''
              }

              subject = JSON.parse(subjectData)
              if (subject.ismul) {
                this.cateid = subject.id.join()
                this.chooseSubjectName = subject.title
              } else {
                this.cateid = String(subject.id)
                this.chooseSubjectName = subject.title
              }
            } else {
              // 第一次进来不用选择，直接加载专升本下的不限、不限
              // this.popIsShow = true
              this.popIsShow = false
              // 现在默认专升本（id：2）
              this.chooseAreaName = '不限'
              this.chooseSubjectName = '不限'
              this.industryId = 2
              this.addressid = 0
              this.cateid = 0
              this.getInfo()
              return
            }
            this.popIsShow = false
            this.getInfo()
          } catch (err) {
            // 第一次进来不用选择，直接加载专升本下的不限、不限
            // this.popIsShow = true
            this.popIsShow = false
            // 现在默认专升本（id：2）
            this.chooseAreaName = '不限'
            this.chooseSubjectName = '不限'
            this.industryId = 2
            this.addressid = 0
            this.cateid = 0
            this.getInfo()
          }
        }
      })
    </script>
  </body>
</html>
